import React, {Component} from 'react';
import {StyleSheet, View, Text, Animated, TouchableOpacity, TouchableHighlight, Slider, Dimensions} from 'react-native';
import Interactable from 'react-native-interactable';

const Screen = Dimensions.get('window');

export default class Row extends Component {
  constructor(props) {
    super(props);
    this._deltaX = new Animated.Value(0);
    this.state = {isMoving: false, position: 1};
  }

  render() {
    const activeOpacity = this.state.position !== 1 ? 0.5 : 1;
    return (
      <View style={{backgroundColor: "#ea281a"}}>
        <View style={{position: 'absolute', right: 0, height: 57, flexDirection: 'row', alignItems: 'center'}}>
          <TouchableOpacity style={[styles.button]} onPress={this.onButtonPress.bind(this, 'trash')}>
            <Text style={styles.font1}>删除</Text>
          </TouchableOpacity>
        </View>
        <Interactable.View
          ref={el => this.interactableElem = el}
          horizontalOnly={true}
          snapPoints={[
            {x: 0, damping: 1 - this.props.damping, tension: this.props.tension},
            {x: -81, damping: 1 - this.props.damping, tension: this.props.tension}
          ]}
          onSnap={this.onSnap.bind(this)}
          onDrag={this.onDrag.bind(this)}
          onStop={this.onStopMoving.bind(this)}
          dragToss={0.01}
          animatedValueX={this._deltaX}>
          <TouchableHighlight onPress={this.onRowPress.bind(this)} activeOpacity={activeOpacity}
                              underlayColor={'#dddddd'}>
            <View style={{left: 0, right: 0, height: 57, backgroundColor: 'white'}}>
              {this.props.children}
            </View>
          </TouchableHighlight>
        </Interactable.View>

      </View>
    );
  }

  onSnap({nativeEvent}) {
    const {index} = nativeEvent;
    this.setState({position: index});
    if(this.props.onSnap) {
      this.props.onSnap();
    }
  }

  onRowPress() {
    const {isMoving, position} = this.state;
    if (!isMoving && position !== 1) {
      this.interactableElem.snapTo({index: 1});
    }
    if(this.props.onRowPress){
      this.props.onRowPress();
    }

  }

  onDrag({nativeEvent}) {
    const {state} = nativeEvent;
    if (state === 'start') {
      this.setState({isMoving: true});
    }
    if(this.props.onDrag) {
      this.props.onDrag({nativeEvent});
    }
  }

  onStopMoving() {
    this.setState({isMoving: false});
    if(this.props.onStopMoving) {
      this.props.onStopMoving();
    }
  }

  onButtonPress(name) {
    if(this.props.onButtonPress){
      this.props.onButtonPress();
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white'
  },
  rowContent: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderColor: '#eeeeee'
  },
  rowIcon: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: '#73d4e3',
    margin: 20
  },
  rowTitle: {
    fontWeight: 'bold',
    fontSize: 20
  },
  rowSubtitle: {
    fontSize: 18,
    color: 'gray'
  },
  button: {
    width: 81,
    height: 57,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ea281a"
  },
  buttonImage: {
    width: 40,
    height: 40
  },
  playground: {
    marginTop: Screen.height <= 500 ? 0 : 80,
    padding: 20,
    width: Screen.width - 40,
    backgroundColor: '#5894f3',
    alignItems: 'stretch',
    alignSelf: 'center'
  },
  playgroundLabel: {
    color: 'white',
    fontSize: 14,
    fontWeight: 'bold',
    marginBottom: 15
  },
  slider: {
    height: 40
  },
  font1: {
    fontSize: 16,
    color: "#ffffff"
  }
});
